<template>
    <footer>
        <p v-for="val in list" :key="val.text">
            <i :class="val.icon"></i>
            <router-link :to="val.path" tag="span">{{ val.text }}</router-link>
        </p>
    </footer>
</template>

<script>
export default {
    data(){
        return{
            list : [
                {
                    path :'/first',
                    text : '首页',
                    icon : 'el-icon-house'
                },
                {
                    path :'/order',
                    text : '点单',
                    icon : 'el-icon-milk-tea'
                },
                {
                    path :'/shop',
                    text : '百货',
                    icon : 'el-icon-discount'
                },
                {
                    path :'/from',
                    text : '订单',
                    icon : 'el-icon-document'
                },
                {
                    path :'/mine',
                    text : '我的',
                    icon : 'el-icon-user'
                },
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
    footer{
        display: flex;
        border: 1px solid #ccc;
        height: 80px;
        padding: 15px 0;
        p{
            flex: 1;
            text-align: center;
            align-items: center;
            display: flex;
            flex-direction: column;
        }
        .router-link-active{
            color: red;
        }
    }
</style>